<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/audio.css">
</head>
<body background="./IMG/bg0.png">

    <!-- 上半部分 -->
    <div class="upper-container">
        <!-- 唱片 -->
        <div class="recorder-container">
            <!-- 唱片黑色背景 -->
            <div class="record-bg">

                <div class="rotate-play"></div>
            </div>
        </div>
        <!-- 歌曲名 -->
        <div class="introduction-container">
            <div class="text-container">
                <div class="music-title">音乐1</div>
            <div class="author-container">作者:
                <span id="author-name">歌手名会变</span>
            </div>
            </div>
        </div>
    </div>
    <!-- 下半部分 -->
    <div class="audio-box">
            <div class="audio-container">
                <audio id="audio" src=""></audio>
                <!-- 进度条 -->
                 <div class="a-progress">
                 <div class="pgs-total">
                    <div class="pgs-play" ">
                    </div>
                  </div>
                 </div>
                 <!-- 下排控制按钮 -->
                  <div class="a-controls">
                    <!-- 播放时间 -->
                     <div class="time-container">
                        <span class="played-time">00:00</span>
                        &nbsp;/&nbsp;
                        <span class="audio-time">00:00</span>

                     </div>
                     <!-- 下排中间按钮 -->
                      <div class="center-button-container">
                        <!-- 播放模式 -->
                         <div class="center-icon mode"></div>
                         <!-- 上一首 -->
                         <div class="center-icon s-left"></div>
                         <!-- 播放、暂停 -->
                         <div class="center-icon icon-play"></div>
                         <!-- 下一首 -->
                         <div class="center-icon s-right"></div>
                         <!-- 播放按钮 -->
                         <div class="center-icon volumn"></div>
                         <!-- 音量进度条 -->
                         <input id="volumn-togger" type="range" title="70%" name="change" min="0" max="100" step="1" value="70" />
                      </div>
                      <div class="a-controls">
                         </div>
                         <!-- 右下角区域按钮 -->
                          <div class="bottom-button-container">
                          <!-- 列表 -->
                          <div class="bottom-icon list"></div>
                          <!-- 倍速 -->
                          <div class="speed">1.0X</div>
                          <!-- MV播放倍速 -->
                          <div class="bottom-icon MV"></div>
                          </div>
                  </div>
        </div>
    </div>

    <!-- 关音乐列表 -->
     <div class="close-list"></div>
    <!-- 音乐列表 -->
     <div class="music-list">
        <div class="music-list-container">
            <div class="music-list-title">播放队列</div>
            <hr class="line" />
            <div class="all-list">
                <div class="music0">Up</div>
                <div class="music1">MM</div>
                <div class="music2">Love</div>
                <div class="music3">likeJENNIE</div>
            </div>
        </div>
     </div>
</body>
</html>
<script src="./JS/audio.js"></script>